<template>
  <div class="recommend">
    <scroll class="recommend-content" :data="discList" ref="scroll">
      <div>
        <div v-if="recommends.length" class="slider-wrapper">
          <slider>
            <div v-for="item in recommends">
              <a :href="item.linkUrl">
                <img :src="item.picUrl" @load="loadImage">
              </a>
            </div>
          </slider>
        </div>
        <div class="recommend-list">
          <h1 class="title">热门歌单推荐</h1>
          <ul>
            <li class="recommend-item" v-for="item in discList">
              <div class="icon">
                <img :src="item.imgurl" width="60" height="60">
              </div>
              <div class="text">
                <div class="name" v-html="item.creator.name"></div>
                <p class="desc" v-html="item.dissname"></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script type="text/ecmascript-6">
  import Scroll from '../../base/scroll/scroll'
  import {ERR_OK} from '../../api/config'
  import {getRecommend, getDiscList} from '../../api/recommend'
  import Slider from '../../base/slider/slider'

  export default {
    data() {
      return {
        recommends: [],
        discList: []
      }
    },
    created() {
      this._getRecommend();
      this._getDiscList();
    },
    methods: {
      _getRecommend() {
        getRecommend().then((res) => {
          if (ERR_OK === res.code) {
            this.recommends = res.data.slider;
          }
        })
      },
      _getDiscList() {
        getDiscList().then((res) => {
          if (ERR_OK === res.code) {
            this.discList = res.data.list;
          }
        });
      },
      loadImage() {
        if (!this.loaded) {
          this.$refs.scroll.refresh();
          this.loaded = true;
        }
      }
    },
    components: {
      Slider,
      Scroll
    },
    destroyed() {
      clearTimeout(this.timer);
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/variable.styl"

  .recommend
    position fixed
    top 88px
    bottom 0
    width 100%
    .recommend-content
      height 100%
      overflow hidden
      .slider-wrapper
        position relative
        width 100%
        overflow hidden
      .recommend-list
        .title
          text-align center
          line-height: 65px
          height 65px
          font-size: $font-size-medium
          color $color-theme
        .recommend-item
          display flex
          align-items center
          box-sizing border-box
          padding 0 20px 20px 20px
          .icon
            flex 0 0 60px
            width 60px
            padding-right 20px
          .text
            flex 1
            display flex
            flex-direction column
            justify-content center
            line-height 20px
            font-size $font-size-medium
            overflow hidden
            .name
              margin-bottom 10px
              color $color-text
            .desc
              color $color-text-d

</style>`
